<template>
	<div class="mapNav" v-show="userInfo.lat">
		<div class="com_navde" @click="jumpMap">
			<div>{{distance}}km</div>
			<img :src="`${constant.imgUrl}design/company/icon_nav.png`" alt="导航" class="navimg">
		</div>
	</div>
</template>

<script>
import { calcDistance } from '@/utils/common'
export default {
	name: 'map-nav',
	data() {
		return {
			constant: this.$constant,
			distance: 0,
			userInfo: ''
		}
	},
	mounted() {},
	methods: {
		init(userInfo) {
			this.userInfo = userInfo
			this.distance = calcDistance(this.userInfo) || 0
		},
		// 跳转到导航
		jumpMap() {
			uni.openLocation({
				latitude: this.userInfo.lat,
				longitude: this.userInfo.lng,
				name: this.userInfo.region_address || '',
				address: this.userInfo.full_address || ''
			})
		}
	}
}
</script>

<style lang="scss">
.mapNav {
    .com_navde {
        z-index: 2;
        // padding: 10px;
        text-align: center;
        min-width: 90px;
        max-width: 120px;
        height: 100px;
        position: fixed;
        right: 3%;
        background: #fff;
        opacity: .95;
        border-radius: .133333rem;
        bottom: 14%;
        box-shadow: 0 0 0.133333rem rgba(0,0,0,.2);
        div {
            margin: 8px 0;
        }
        & > image {
            width: 44px;
            height: 44px;
            margin: 0 auto;
        }
    }
}
</style>
